<script setup>
import Tapbar from "../../components/tapbar.vue";
import {onLoad, onReady, onReachBottom} from "@dcloudio/uni-app";
import { getHotSearchAPI, getShopListAPI,getSwiperAPI } from '/src/api/page/pageApi';
import {ref,reactive} from 'vue';

const hotList = ref([])
const shopList = ref([])
const shopTotal = ref(0)
const pagenum = ref(1)
const pagesize = ref(10)
const jg = ref(['美妆个护','母婴用品','潮流服饰','跨境购','手机数码','居家用品','玩具乐器','更多'])
let swiperList = reactive(
    [{
      image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      title: '昨夜星辰昨夜风，画楼西畔桂堂东'
    },
      {
        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
        title: '身无彩凤双飞翼，心有灵犀一点通'
      },
      {
        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
      }
    ]
)

const uToastRef = ref(null);
onLoad(()=>{
 uni.showToast({
   icon:'loading'
 })
  getSwiper()
  console.log(swiperList);
  // 请求热搜--调用
  getHotSearch()
  // 商品列表调用
  getShoplist()
})
onReady(()=>{
  uni.hideToast();
})

// 判断到底了
onReachBottom(()=>{
  console.log('到底了',shopList.value.length!==0,shopList.value.length, typeof shopTotal,shopList.value.length,shopTotal.value);
  if (shopList.value.length!==0&&shopList.value.length < Number(shopTotal.value)) {
    pagenum.value = pagenum.value + 1
    getShoplist()
  }else{
    uToastRef.value.show({
      type: 'success',
      message: "到底了",
    });
  }
})

function toSearch(){
  uni.navigateTo({
    url:'/pages/search/search'
  })
}

function onToShopInfo(id, url) {
  uni.navigateTo({
    url:'/classification/shopInfo/shopInfo?id='+id+'&img='+url
  })
}

// 请求热搜
async function getHotSearch() {
  const {list, state, msg, total} = await getHotSearchAPI()
  if(state === 200){
    console.log('热搜', list);
    hotList.value = list
  }
}

// 请求商品列表，首页
async function getShoplist(option={pagenum:pagenum.value,pagesize:pagesize.value}){
  const {state, msg, total, list} = await getShopListAPI(option);
  if(state === 200){
    console.log(list, '商品列表');
    if (shopList.value.length>0&&shopList.value.length<shopTotal.value) {
      shopList.value = [...shopList.value, ...list];
    } else if(shopList.value.length === 0){
      shopList.value = list;
    }
    shopTotal.value = Number(total)
  }else{
    uToastRef.value.show({
      type: 'error',
      message: msg,
    });
  }
}

async function getSwiper() {
  const {list, state, msg, total} = await getSwiperAPI()
  if(state === 200){
    swiperList = list.reduce((value,item)=>{
      value.push({
        image:item.img.substring(12)
      })
      return value
    },[])
    // swiperList = list.map((item)=>{return item.img})
  }
}
</script>

<template>
  <up-toast ref="uToastRef"></up-toast>
  <Tapbar :value1="0"></Tapbar>
<!--  最外圈 -->
 <view class="bigBox">
  <view class="header">
    <!--   搜索 -->
    <view class="search-input">
      <view class="input-box">
        <up-input
            @focus="toSearch"
            border="none"
            placeholder="输入搜索关键词"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399;"
            customStyle="width: 627rpx;height: 66rpx;background:#fff;border-radius:20rpx"
        ></up-input>
      </view>
        <view class="title">
          <image src="/src/assets/shao.png"></image>
          <view class="saoTitle">扫一扫</view>
        </view>
    </view>
    <!--   热搜-->
    <view class="searchHotBox">
      <view>热搜：<text v-for="(item,index) in hotList" :key="index">{{ item.content }}</text></view>
    </view>
<!--    <image  src="/src/assets/nav.png"></image>-->
    <view class="navImage">
      <u-swiper :list="swiperList"
                indicator
                indicatorMode="line"
                keyName="image" circular title="true" :effect3d="true"></u-swiper>
    </view>
  </view>
<!--金刚区-->
   <view class="peterJacksonSKingKong">
          <view class="kong-min" >
            <image src="/src/assets/n1.png"></image>
            <view>{{ jg[0] }}</view>
          </view>

     <view class="kong-min" >
       <image src="/src/assets/n2.png"></image>
       <view>{{ jg[1] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n3.png"></image>
       <view>{{ jg[2] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n4.png"></image>
       <view>{{ jg[3] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n5.png"></image>
       <view>{{ jg[4] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n6.png"></image>
       <view>{{ jg[5] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n7.png"></image>
       <view>{{ jg[6] }}</view>
     </view>

     <view class="kong-min" >
       <image src="/src/assets/n8.png"></image>
       <view>{{ jg[7] }}</view>
     </view>
   </view>

   <!--人气商品-->
   <view class="popularity">
     <view class="popularity-nav">
       <view class="popularTitle"> 人气商品 </view>
     </view>
     <!--       列表-->
     <view class="shopList">
       <view class="singleProduct" @click="onToShopInfo(item.goods_id,item.goods_img)" v-for="(item,index) in shopList" :key="index">
         <image :src="item.goods_img"></image>
         <view class="shopName">{{item.goods_name}}</view>
         <view class="price">价格：<text class="priceNum">￥{{ item.shop_price }}</text></view>
       </view>
     </view>
   </view>
 </view>
</template>

<style lang="scss" scoped>
.bigBox{
  width:750rpx;
  height:100vh;
  .header{
    position:relative;
    width:750rpx;
    height:383rpx;
    background:#f9b278;
    padding-top:66rpx;
    .search-input{
      border-radius:20rpx !important;
      width:100%;
      box-sizing: border-box;
      padding-left:32rpx;
      height:66rpx;
      display:flex;
      .input-box{
        width:627rpx;
        height:66rpx;
      }
      .title{
        height:66rpx;
        text-align:center;
      }
      image{
        width:34rpx;
        height:30rpx;
      }
      .saoTitle{
        font-size:6rpx;
        color:#fff;
      }
    }

    .searchHotBox{
      width:750rpx;
      box-sizing: border-box;
      padding:30rpx 35rpx;
      font-size:27rpx;
      text{
        padding:10rpx 17rpx;
        background: rgba(255, 255, 255, 0.14);
        border-radius:21rpx;
        margin-right:17rpx;
        color:#fff;
        font-size:24rpx;
      }
    }
    .navImage{
      width:690rpx;
      height:288rpx;
      position:absolute;
      bottom:- 120rpx;
      left:30rpx;
      z-index: 9;
    }
  }
  //金刚区
  .peterJacksonSKingKong{
    width:690rpx;
    height:354rpx;
    
    margin-left:30rpx;
    margin-top:148rpx;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .kong-min{
      width:172rpx;
      text-align:center;
      image{
        width:82rpx;
        height:82rpx;
        margin-bottom:19rpx;
        margin-top:28rpx;
      }
      text{
        font-size:23rpx;
      }
    }
  }
//  人气商城
  .popularity{
    width:750rpx;
    .popularity-nav{
      width:100%;
      height:107rpx;
      text-align:center;
      line-height:107rpx;
      border-bottom:1px rgba(0, 0, 0, 0.24) solid;
      .popularTitle{
        position:relative;
      }
      .popularTitle::after{
        content:'';
        position:absolute;
        width:30rpx;
        height:1rpx;
        border-bottom:black 2px solid;
        top:50%;
        left:35%;
      }
      .popularTitle::before{
        content:'';
        position:absolute;
        width:30rpx;
        height:1rpx;
        border-bottom:black 2px solid;
        top:50%;
        right:35%;
      }
  }
    .shopList{
      width:750rpx;
      display:flex;
      flex-wrap: wrap;
      
      margin:0;
      .singleProduct{
        width:330rpx;
        margin-left:29rpx;
        margin-top:25rpx;
        image{
          width:330rpx;
          height:330rpx;
        }
        .shopName{
          font-size:30rpx;
          font-weight:bold;
          padding:10rpx 0;
          width:80%; /* 设置一个固定宽度 */
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 超出隐藏 */
          text-overflow: ellipsis;
        }
        .price{
          .priceNum{
            color:red;
          }
        }
      }
    }
  }
}
</style>